<template>
  <section class="call-mes-tel">
    <div class="setting-contain">

      <div class="call-set">
        <div class="call-item">
          <span class="label-content" style="margin-right:12px;">未接通设置</span>
          <el-radio-group v-model="form.blockCallConfig">
            <el-radio :label="0">不再继续拨打</el-radio>
            <el-radio :label="1">继续拨打</el-radio>
          </el-radio-group>
        </div>

        <div class="call-item" v-if="form.blockCallConfig == 1">
          <span class="label-content">最多拨打</span>
          <el-select 
            v-model="form.continuedCalls" 
            placeholder="请选择"
            style="width:82px;margin:0 4px;">
            <el-option label="1" :value="1"></el-option>
            <el-option label="2" :value="2"></el-option>
          </el-select>
          <span>次</span>
        </div>
      </div>

      <el-input
        class="message-content"
        type="textarea"
        :rows="8"
        placeholder="请输入"
        v-model="form.content"
        disabled>
      </el-input>

    </div>

    <div class="tips">
      <h6>模板填写规范 </h6>
      <p>1.模板内容可添加多个变量，变量格式由系统自动生成不可变更</p>
      <p>2.系统变量每种仅限使用一次</p>
    </div>

  </section>

</template>

<script>
export default {
  // 电话消息模版
  name:'call-mes-tel',

  data(){
    return{
      form:{
        // 未接通设置:0-不继续拨打，1-继续拨打
        blockCallConfig:null,
        // 最多拨打次数
        continuedCalls:1,
        // 模版内容
        content:null
      }
    }
  },

  props:{
    // 模版数据
    sourceData:{
      type:Object,
      required:true
    },

    // 当前渠道的channel值
    channel:{
      type:[String,Number],
      required:true
    },
    
    // 当前选中的渠道
    sendChannelList:{ 
      type:Array,
      required:true
    },
    // 是否校验模版内容变化 默认要校验 触发器不校验
    isValidateChange: {
      type: Boolean,
      default: true
    },
  },

  mounted(){
   const { blockCallConfig, continuedCalls, content } = this.sourceData || {}
    this.form.blockCallConfig = blockCallConfig
    this.form.continuedCalls = continuedCalls || 1
    this.form.content = content
  },

  methods:{
    // 供父组件调用，提交校验，当校验失败resolve里面传入失败原因
    validate(){
      const { blockCallConfig, continuedCalls, content } = this.form
      
      // 必填字段：content 和 blockCallConfig 
      // 当blockCallConfig = 1（继续拨打）时还要校验continuedCalls（继续拨打几次）字段
      if( content && (blockCallConfig == 0 || (blockCallConfig ==1 && continuedCalls))){
        return Promise.resolve(true)
      }
        
      // 当前渠道是否被勾选了
      const isSelected = this.sendChannelList.includes(this.channel)

      return Promise.resolve(`您${isSelected ? '勾选了' : '修改了'}电话消息渠道，请先设置内容`)
    },

    // 供父组件调用，是否有修改模版
    isChange(){
      if(!this.isValidateChange) return true

      const { 
        blockCallConfig, 
        continuedCalls, 
        content,
      } = this.sourceData || {}

      return (
        blockCallConfig !== this.form.blockCallConfig || 
        continuedCalls !==  this.form.continuedCalls || 
        content !==  this.form.content
      )
    },
    
    // 父组件调用，整理接口需要的参数
    getParam(){
      const { blockCallConfig, continuedCalls, content } = this.form

      let callingTemplateParam = null

      let params = { callingTemplateParam }

      if(!this.isChange() && this.isValidateChange) return params;

      callingTemplateParam = {
        id:this.sourceData.templateId,
        blockCallConfig,
        continuedCalls,
        content
      }

      return { callingTemplateParam }

    }
  }
}
</script>

<style lang="scss" scoped>
.call-mes-tel{
  padding:24px;
  .setting-contain{
    padding:22px 16px;
    background:#fff;
    border-radius: 4px;
  }
  .call-set{
    display: flex;
    align-items: center;
    height:32px;
    .el-radio{
      margin-right:17px;
    }
  }
  .message-content{
    margin-top:16px;
    
    ::v-deep textarea{
      background: #F5F5F5 !important;
    }
  }
  .label-content{
    font-size: 14px;
    font-weight: 400;
    color: #595959;
    line-height: 20px;
  }
  .tips{
    margin-top:12px;
    h6,p{
      margin:0;
      color:#8C8C8C;
    }
    h6{
      font-size: 14px;
      font-weight: 400;
      color: #595959;
      line-height: 20px;
    }
  }
}
</style>